<template>
	<!-- 我参与的活动 -->
	<view>
		<view class="bg_"></view>
		<view class="box">

			<u-tabs-swiper class="tabsSwiper" ref="uTabs" :list="barList" :is-scroll="false" :current="tabsCurrent"
				@change="tabsChange" swiperWidth="750" height="104" font-size="30" active-color="#2d3034"
				inactive-color="#909499" bar-width="60" bar-height="4" bg-color="#f5f6f9"
				:bar-style='{"backgroundColor": "#F10200"}'></u-tabs-swiper>


			<!-- <view class="content" :style="'padding-top:'+ (2*menuButtonInfo.top+162) + 'rpx'"> -->
			<view class="content">
				<!-- <swiper :current="barCurrentIndex" class="content_swiper" :style="'height:calc(100vh - ' + (2*menuButtonInfo.top+197)+ 'rpx);'" @change="animationfinish"> -->
				<swiper :current="barCurrentIndex" class="content_swiper" @animationfinish="animationfinish"
					@transition="transition">
					<!-- <swiper :current="barCurrentIndex" class="content_swiper"> -->
					<swiper-item class="swiper-item" v-for="(item, index) in activityList " :key="index">
						<scroll-view class="content-scroll" scroll-y>
							<view>
								<view class="scroll" v-for="(item1, index1) in item" :key="index1"
									@click="goOrderDetails(item1, item1.orderNo)">
									<view class="scroll_num">
										<!-- No.123098340 -->
										No.{{item1.orderNo}}
										<view class="scroll_num_ examine">
											<!-- 待审核 -->
											<!-- {{item1.status}} -->
											<!-- {{item1.reviewStatus == 1 ? '审查中' : item1.reviewStatus == 2 ? '审查成功 ' : '审查失败'}} -->
											<view v-if="item1.status == 10">已取消</view>
											<view v-else-if="item1.reviewStatus == 1">待审核</view>
											<view v-else-if="item1.reviewStatus == 2">
												<!-- 审查成功 -->
												<!-- <text v-if="item1.status == 10" class="fail">已取消</text> -->
												<text v-if="item1.status == 20">待参加</text>
												<text v-else="item1.status == 30" class="fail">已完成</text>
											</view>
											<view v-else class="fail">报名失败</view>
										</view>
									</view>
									<view class="scroll_content">
										<view class="scroll_content_image">
											<!-- <image class="scroll_content_image_" src="https://z3.ax1x.com/2021/08/12/fwTgzD.png"></image> -->
											<image class="scroll_content_image_" :src="item1.imageList[0]"
												mode="aspectFill"></image>
										</view>
										<view class="scroll_content_">
											<view class="scroll_content_title">
												<!-- 活动标题 -->
												{{item1.activityName}}
											</view>
											<view class="scroll_content_icon">
												<image class="scroll_content_icon_" :src="item1.categoryImage"
													mode="widthFix">
												</image>
												<!-- 														<text>
														{{item1.activityCategoryName}}
													</text> -->
											</view>

											<view class="scroll_content_time">
												<view>
													<view class="scroll_content_time_">
														<image class="scroll_content_time_icon"
															src="https://z3.ax1x.com/2021/08/27/hQDVdx.png"></image>
													</view>
													<view class="timeSlot">
														<!-- 2020.12.12 12:00 - 2020.12.12 22:00 -->
														{{$Tools.startToEnd(item1.timeStart,item1.timeEnd)}}
													</view>
												</view>
												<view>
													<view class="scroll_content_time_">
														<image class="scroll_content_time_icon"
															src="https://z3.ax1x.com/2021/08/27/hQ6nHA.png"></image>
													</view>
													<view class="timeSlot address">
														<!-- 广州市海珠区巴拉巴拉巴拉大厦Z座007号房 -->
														{{item1.address}}
													</view>
												</view>
											</view>

										</view>
									</view>
									<view v-if="item1.reviewStatus == 1 && item1.status != 10">
										<view class="hr"></view>
										<view class="button">
											<view class="button_">取消报名</view>
										</view>
									</view>
									<view v-if="item1.reviewStatus == 2 && item1.status == 20">
										<view class="hr"></view>
										<view class="button">
											<view class="button_">参加码</view>
										</view>
									</view>
								</view>
								
							</view>
							<loading :toast="loadStatux" :title="'暂无活动'"></loading>


						</scroll-view>
					</swiper-item>

				</swiper>
			</view>

		</view>
	</view>
</template>

<script>
	import empty from "@/components/defaultpage/empty.vue"
	import network from "@/components/defaultpage/network.vue"
	import loading from '@/components/loading/loading.vue'
	export default {
		data() {
			return {
				// menuButtonInfo: {
				// 	top: 25
				// },
				tabsCurrent: 0,
				barList: [{
						name: "全部"
					},
					{
						name: "待审核"
					},
					{
						name: "待参加"
					},
					{
						name: "已完成"
					}
				],
				barCurrentIndex: 0,
				activityList: [
					[],
					[],
					[],
					[]
				],
				isShowload: [false, false, false, false],
				loadStatux: 'Loading'
			}
		},
		onLoad() {
			this.init()
		},
		components: {

			empty,
			network,
			loading
		},
		watch:{
			loadStatux(a,b){
				// debugger
			}
		},
		methods: {
			init() {

				this.$apis.userActivityList(0).then(res => {
					let a = res.rows;
					if (res.rows.length != 0) {
						let resData = JSON.parse(JSON.stringify(this.activityList));
						resData[0] = res.rows;
						this.activityList = JSON.parse(JSON.stringify(resData));

						let isShowload = JSON.parse(JSON.stringify(this.isShowload));
						setTimeout(() => {
							isShowload[0] = true;
							this.isShowload = JSON.parse(JSON.stringify(isShowload));
						}, 1000);
						setTimeout(()=>{
							this.loadStatux = 'moduleNomore';
						},800)

					} else {
						setTimeout(()=>{
							this.loadStatux = 'empty';
						},800)
					}

				})
				console.log("activityList 000", this.activityList)



			},

			goNavigateBack() {
				uni.navigateBack()
			},
			getBarCurrent(index) {
				this.barCurrentIndex = index
				let i = index.toString()
				this.$apis.userActivityList(i).then(res => {
					if (res.rows.length != 0) {
						let resData = JSON.parse(JSON.stringify(this.activityList));
						resData[index] = res.rows;
						this.activityList = JSON.parse(JSON.stringify(resData));
						this.isShowload.forEach(item => {
							item = false
						})
						let isShowload = JSON.parse(JSON.stringify(this.isShowload));
						setTimeout(() => {
							isShowload[index] = true;
							this.isShowload = JSON.parse(JSON.stringify(isShowload));
						}, 1000)
						this.loadStatux = 'moduleNomore';

					} else {
						this.loadStatux = 'empty';
					}


				})
			},
			initDate() {

			},
			tabsChange(index) {
				this.barCurrentIndex = index;
			},
			transition(e) {
				this.loadStatux = "Loading"
				let newisShowload = JSON.parse(JSON.stringify(this.isShowload));

				newisShowload[this.barCurrentIndex] = false;
				this.isShowload = JSON.parse(JSON.stringify(newisShowload));
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				
				let index = e.detail.current;
				this.barCurrentIndex = index
				this.$refs.uTabs.setFinishCurrent(index);
				this.tabsCurrent = index

				let i = index.toString()
				this.$apis.userActivityList(i).then(res => {
					if(res.rows.length != 0){
						
						let resData = JSON.parse(JSON.stringify(this.activityList));
						resData[index] = res.rows;
						this.activityList = JSON.parse(JSON.stringify(resData));
						this.isShowload.forEach(item => {
							item = false
						})
						let isShowload = JSON.parse(JSON.stringify(this.isShowload));
						setTimeout(() => {
							isShowload[index] = true;
							this.isShowload = JSON.parse(JSON.stringify(isShowload));
						}, 1000)
					this.loadStatux = 'moduleNomore';
					
					} else {
						
						this.loadStatux = 'empty';
					}
					
				})
			},
			goOrderDetails(item, orderNo) {
				// 后面添加状态过去 利用已取消
				item = encodeURI(JSON.stringify(item))
				uni.navigateTo({
					// url: "../orderDetails/orderDetails?item=" + item + "&orderNo=" + orderNo
					url: "../orderDetails/orderDetails?orderNo=" + orderNo
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg_top {
		width: 750rpx;
		background-color: #ffffff;
		position: fixed;
		z-index: 9;
	}

	.z_index {
		z-index: 10;
	}

	.top {
		width: 750rpx;
		height: 48rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: 20rpx;
	}

	.top_icon {
		margin-left: 32rpx;
		display: inline-block;
	}

	.top_title {
		position: absolute;
		font-size: 34rpx;
		font-weight: 500;
		line-height: 48rpx;
		display: inline-block;
		left: 50%;
		transform: translate(-50%);
	}

	.bg_ {
		background: #f5f6f8;
		width: 750rpx;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: -1;
	}

	.box {
		margin: 0;
		padding: 0;
		width: 750rpx;
	}

	.tabsSwiper {
		z-index: 10;
	}

	.u-tabs-item {
		font-weight: 700 !important;
	}

	.u-scroll-bar {
		bottom: 20rpx !important;
	}

	.bar {
		// padding-top: 35rpx;
		width: 670rpx;
		/* height: 104rpx; */
		padding-left: 80rpx;
		position: fixed;
		z-index: 9;
		background: #f5f6f8;
	}

	.bar_ {
		margin-right: 80rpx;
		display: inline-block;
		color: #909499;
		font-size: 30rpx;
		font-weight: 700;
		padding-bottom: 6rpx;
		margin-bottom: 20rpx;
	}

	.bar_current {
		color: #2d3034;
		border-bottom: 4rpx #f10200 solid;
	}

	.content {
		width: 750rpx;
		height: 100%;
	}

	.content_swiper {
		width: 100%;
		height: calc(100vh - 104rpx);
		// height: 100vh;
		position: fixed;
		top: 104rpx;
		// background-color: red;
		// z-index: 200;
		// height: calc(100vh - 10rpx);
		/* background-color: #000000; */
	}

	.swiper-item {
		width: 750rpx;
		height: 100%;
		overflow: scroll;
	}

	.content-scroll {
		// margin-top: 60rpx;
		width: 750rpx;
		height: 100%;
	}

	.scroll {
		margin: 0rpx 40rpx 20rpx 40rpx;
		width: 670rpx;
		background: #ffffff;
		border-radius: 12rpx;
		// height: 428rpx;
		// padding: 0 30rpx;
		padding-bottom: 30rpx;
	}

	.scroll_num {
		margin-left: 30rpx;
		width: 610rpx;
		padding-top: 30rpx;
		color: #909499;
		font-size: 22rpx;
		margin-bottom: 24rpx;
		position: relative;
		display: inline-block;
	}

	.scroll_num_ {
		display: inline-block;
		position: absolute;
		right: 0;
		bottom: 2rpx;
	}

	.examine {
		color: #f18200;
	}

	.fail {
		color: #909499;
	}

	.scroll_content {
		margin-left: 30rpx;
		// height: 226rpx;
		width: 610rpx;
	}

	.scroll_content_image {
		display: inline-block;
		margin-right: 20rpx;
		vertical-align: top;
	}

	.scroll_content_image_ {
		width: 160rpx;
		height: 226rpx;
		border-radius: 12rpx;
	}

	.scroll_content_ {
		display: inline-block;
	}

	.scroll_content_title {
		width: 332rpx;
		height: 88rpx;
		color: #2d3034;
		font-weight: 700;
		font-size: 30rpx;
		margin-right: 36rpx;
		display: inline-block;
		vertical-align: top;
	}

	.scroll_content_icon {
		width: 62rpx;
		height: 32rpx;
		position: relative;
		display: inline-block;

		// text {
		// 	width: 62rpx;
		// 	height: 32rpx;
		// 	position: absolute;
		// 	left: 16rpx;
		// 	top: 3rpx;
		// 	color: #e63018;
		// 	font-size: 20rpx;
		// }
	}

	.scroll_content_icon_ {
		width: 62rpx;
		height: 32rpx;
		position: absolute;
		top: 2rpx;
		right: -4rpx;
	}

	.scroll_content_time {
		// margin-top: 70rpx;
		width: 430rpx;
		height: 64rpx;
	}

	.scroll_content_time_ {
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
		display: inline-block;
		vertical-align: top;
	}

	.scroll_content_time_icon {
		width: 100%;
		height: 100%;
	}

	.timeSlot {
		width: 398rpx;
		height: 28rpx;
		display: inline-block;
		font-size: 22rpx;
		font-weight: 400rpx;
		color: #606266;
	}

	.address {
		font-size: 20rpx;
	}

	.hr {
		margin-top: 30rpx;
		width: 670rpx;
		// width: 610rpx;
		height: 2rpx;
		background: #f5f6f9;
		display: inline-block;
	}

	.button {
		width: 670rpx;
		margin-top: 19rpx;
		text-align: right;
	}

	.button_ {
		display: inline-block;
		border: 1px solid #e1e3e5;
		border-radius: 8rpx;
		color: #2d3034;
		font-size: 26rpx;
		padding: 6rpx 18rpx;
		margin-right: 30rpx;
	}

	.circle {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.circle_ {
		position: absolute;
		left: 50%;
		transform: translateX(-100%);
	}
</style>
